<template>
  <div>
    <div>个人中心：</div>
    <div>
      当前用户：{{ $store.state.user.name }}
      <a href="javascript:;" @touchstart="handleToLogout">退出</a>
    </div>
    <div v-if="$store.state.user.isAdmin">
      用户身份：管理员
      <a href="/admin" target="_blank">进入管理后台</a>
    </div>
    <div v-else>用户身份：普通会员</div>
    <div>
      <!-- 通过vuex渲染出来 -->
      <input type="file" name="file" value="上传头像" @change="handleToUpload" />
      <img class="userHead" :src="$store.state.user.userHead" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getlogout } from "network/login/logout";
import { getuser, getimg } from "network/login/getuser";
export default {
  name: "center",
  methods: {
    //退出功能
    handleToLogout() {
      this.getlogout();
    },
    //退出功能
    getlogout() {
      getlogout().then((res) => {
        // 接口失效无法打印
        // var status = res.status;
        // if(status === 0) {
        //本地存储清除
        localStorage.removeItem("name", res.data.username);
        localStorage.removeItem("isAdmin", res.data.isAdmin);
        this.$store.commit("User/USER_NAME", {
          name: "",
          isAdmin: true,
          userHead: "",
        });
        //   this.$router.push('/mine/login')
        // }
      });
    },

    //上传图片每次选择完头像后就会触发这个方法
    handleToUpload(ev) {
      var file = ev.target.files[0]; // 图片文件
      var param = new FormData(); // 实例可以把文件存储起来 传输给后台  append
      // 通过append方法  参数1  file (k 值)  参数2 文件 (值) 参数3 文件下的name  就是input 标签的name属性
      param.append("file", file, file.name);
      // 发送请求 二进制要进行请求头的设置二进制格式 在封装的哪里添加了
      /* var config = {
        headers:{
            'Content-Type' : 'multipart/form-data'
        }
      }*/
      getimg(param).then((res) => {
        var status = res.data.status;
        var This = this;
        if (status === 0) {
          messageBox({
            title: "信息",
            content: "上传头像成功",
            ok: "确定",
            handleOk() {
              This.$store.commit("user/USER_NAME", {
                //更新不同的图片就要切换不同的用户名 就是从vuex读取出来
                name: This.$store.state.user.name,
                isAdmin: This.$store.state.user.isAdmin,
                userHead: res.data.data.userHead + "?" + Math.random(),
              });
            },
          });
        } else {
          messageBox({
            title: "信息",
            content: "上传头像失败",
            ok: "确定",
          });
        }
      });
    },
  },
  //进入这个路由之前进行登录态的验证 灭有登录就返回登录页面 有级继续保存
  beforeRouteEnter(to, from, next) {
    //这里就不在封装一层了 直接调用
    // getuser().then(res=>{
    //      //接口失效无法打印
    //     var status = res.status;
    //     if(status === 0) {
    // next((vm) => {
    //   //本地存储
    //   localStorage.setItem('name',res.data.username)
    //   localStorage.setItem('isAdmin',res.data.isAdmin)
    //   vm.$store.commit("User/USER_NAME", {
    //     name: res.data.username,
    //     isAdmin: res.data.isAdmin,
    //  userHead : res.data.data.userHead
    //   });
    // });
    //     }else {
    //       next('/mine/login')
    //     }
    // })
    // axios.get("/api2/users/getUser").then((res) => {
    //  var status = 2;
    //    if (status === 0) {
    //     next();
    //   } else {
    // next('/mine/login');
    next();
    //   }
    // });
  },
};
</script>

<style scoped>
.userHead {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
</style>
